import React, { useState, useEffect } from 'react'
import { AlipayCircleFill, ChatCheckOutline, CollectMoneyOutline, LeftOutline } from 'antd-mobile-icons'
import { Input, Form, Radio, Space, Button, Checkbox } from 'antd-mobile'
import { NavLink, useLocation, useNavigate } from 'react-router-dom'
import ReactDOM, { unstable_batchedUpdates } from "react-dom";
import './pay.scss'
import { useDispatch, useSelector } from "react-redux";
import API from "../api/order";
import { store } from '../../store'



export default function Pay() {
    const navigate = useNavigate()
    const { _id, token } = store.getState().userReducer.user
    const { orderReducer } = useSelector((state: any) => state)
    const [countDown, setCount] = useState()
    const [value, setValue] = useState<string>()
    const location = useLocation()
    const [time, settime] = useState(60)

    const orderEdit = async () => {
        let res = await API['orderEdit']({ state: '待送达', token, id: orderReducer.order.order_id })
        console.log(res, '订单支付成功')
    }
    function handleClick() {
        setInterval(() => {
            ReactDOM.unstable_batchedUpdates(() => {
                settime((c) => c - 1);
            })
        }, 1000)
    }

    return (
        <div>
            <div className='pay_back1'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                收银台
            </div>
            <div className='pay'>
                <div className='pay_type'>
                    <div className='total1'>￥{orderReducer.order.total}</div>
                    <div className='type'><span><AlipayCircleFill />手机支付宝</span><span><Checkbox checked={true}></Checkbox></span></div>
                    <div className='type'><span><ChatCheckOutline />微信支付</span><span><Checkbox></Checkbox></span></div>
                    <div className='type'><span><CollectMoneyOutline />银联云闪付</span><span><Checkbox></Checkbox></span></div>
                    <Button className='pay_btn' block color='primary' size='large' onClick={() => {
                        orderEdit()
                        navigate('/paydone')
                    }}>
                        立即付款
                    </Button>
                </div >
            </div>
        </div>
    )
}
